<template>
    <scroll-page 
        :loading="loading" 
        :offset="offset" 
        :no-data="noData" 
        @load="load"
    >
        <el-row class="article-list">
            <el-col v-for="(item, index) in articles" :key='index' class="scroll-item" :span="24">
                <el-card shadow="always">
                    <h5>
                        <el-link target="_blank" @click="view(item.id)">{{ item.name }}</el-link>
                    </h5>
                    <el-row class="bar">
                        <el-col><i class="el-icon-user"></i><span>作者</span><span>Mr.Yong</span></el-col>
                        <el-col><i class="el-icon-time"></i><span>发表于</span><span>{{ item.create_time }}</span></el-col>
                        <el-col><i class="el-icon-s-unfold"></i><span>分类</span><span><a
                                    href="#">{{ item.cate_name }}</a></span> |</el-col>
                        <el-col><i class="el-icon-view"></i><span>阅读量</span><span>{{ item.clicks }}</span> |</el-col>
                        <el-col><i class="el-icon-chat-dot-round"></i><span>评论数</span><span>{{ item.comments ||
                                0
                        }}</span></el-col>
                    </el-row>
                    <el-row class="desc">
                        <p>{{ item.description }}</p>
                    </el-row>
                    <el-row class="more">
                        <span
                            v-for="tag in item.tags" 
                            :key='tag.id'
                            class="el-tag el-tag--success el-tag--mini" 
                            @click="to_tag(tag.id)"
                        >{{ tag.name }}</span>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </scroll-page>
</template>
<script>
import ScrollPage from './ScrollPage'
export default {
    name: 'ArticleScrollPage',
    components: { ScrollPage },
    props: {
        offset: {
            type: Number,
            default: 100
        },
        page: {
            type: Object,
            default() {
                return {}
            }
        },
        query: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            loading: false,
            noData: false,
            innerPage: {
                pageSize: 10,
                pageNo: 1,
            },
            articles: [],
            isShow: 'hide',
            params: {}
        }
    },
    watch: {
        'query': {
            handler() {
                this.noData = false
                this.articles = []
                this.innerPage.pageNo = 1
                this.getArticles()
            },
            deep: true
        },
        'page': {
            handler() {
                this.noData = false
                this.articles = []
                this.innerPage = this.page
                this.getArticles()
            },
            deep: true
        },
        // articles: function() {
        //     /*DOM还没更新*/
        //     var target = this;
        //     target.$nextTick(function(){
        //         /*现在数据已经渲染完毕*/
        //         target.scrollReveal.reveal('.list-item',{
        //             reset: true,
        //             // distance: '50px',
        //             // origin: 'left',
        //             duration: 1000,
        //             // easing:'linear',
        //         })
        //     })
        // },
    },
    mounted() {
        this.params = this.query;
        this.getArticles()
        
    },
    methods: {
        load() {
            this.getArticles()
        },
        view(id) {
            this.$router.push({ path: `/view/${id}` })
        },
        to_tag(id) {
            this.$router.push({ path: `/tag/${id}` })
        },
        getArticles() {
            this.loading = true
            this.params.page = this.innerPage.pageNo;
            this.params.size = this.innerPage.pageSize;
            
            this.$Api.getArticleList(this.params).then(res => {
                const newArticles = res.data
                if (newArticles && newArticles.length > 0) {
                    this.innerPage.pageNo += 1
                    this.articles = this.articles.concat(newArticles)
                    this.isShow = 'hide'

                } else {
                    this.noData = true
                    this.isShow = 'show'
                }
                this.loading = false
            }).catch(error => {
                if (error !== 'error') {
                    this.$message({ type: 'error', message: '文章加载失败!', showClose: true })
                }
            }).finally(() => {
                this.loading = false
            })
        }
    }
}
</script>
<style lang="less" scoped>
.show{
display:block;
    text-align:center;
}
    
.hide{
display:none;
}
    
.article-list{
    width:100%;
    // margin 10px 0px
    cursor:pointer;
    opacity:0.9;
    
    .el-col{
        margin: 10px 0;
        // animate-duration: 2s;   //动画持续时间
        // animate-delay :1s;    //动画延迟时间
        // animate-iteration-count: 1;    //动画执行次数
        .el-card{
            width:100%;
            text-align:left; 
            h5{
                color:#555;
                .el-link{
                    font-size:26px;
                    font-weight:400;
                } 
            }
            .bar{
                width:100%;
                font-size:12px;
                color :#999;
                padding:5px 0;
                .el-col{
                    display:inline-block;
                    width: auto;
                    i{
                        margin-right:5px
                    }
                       
                    span{
                        margin-right :5px
                    }
                }
            }
                        
            .desc{
                width :100%;
                color :#555;
                font-size :16px;
                line-height :2;
                padding :10px 0;
                p{
                    display :block;
                    height :70px;
                    overflow :hidden;
                    text-overflow: -o-ellipsis-lastline;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
            .more{
                text-align: left;  
                font-size :12px;
                color :#999;
                .el-tag{
                    margin-left :5px;
                }
                    
                .el-link{
                    font-size :16px
                }
            }
        }
    }               
}
    

.article-list h5 .el-link .el-link--inner{
    width: 100%;
    height :40px;
    overflow :hidden;
    text-overflow :ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp :1;
    display: -webkit-box;
    clear :both;
    text-align :left; 
}

</style>